<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<button>ajax</button>
		<button id="register">注册</button>
		<div></div>
		<script type="text/javascript">
			/*
			API(application programming interface)应用程序接口(一些定义好的方法)
			
			1.什么是ajax
			  ajax(asynchronous javascript and xml) 前后端交换的一种技术
			2.使用ajax
			2.1创建XMLHttpRequest对象
			2.2配置请求信息
			xhr.open(请求方式,请求地址,是否异步)
			请求方式:GET POST PUT DELETE...
			请求地址:后端API接口
			是否异步:默认true，false同步
			2.3发送请求
			xhr.send()
			2.4接收响应
			
			事件
			onload
			onreadystatechange
			
			readyState: 
			0 请求未初始化
			1 服务器连接已建立
			2 请求已接收
			3 请求已处理
			4 请求已完成且响应已就绪
			
			status:
			200 "ok"
			404 未找到页面
			
			2.5数据
			responseText
			responseXML
			
			*/
			function test() {
				var xhr = new XMLHttpRequest();
				xhr.open("GET", "http://poetry.apiopen.top/sentences");
				xhr.send();
				xhr.onreadystatechange = function() {
					if (xhr.readyState == 4 && xhr.status == 200) {
						// console.log(xhr.responseText);
						// document.write(xhr.responseText);
						var div = document.querySelector("div");
						// div.innerHTML = xhr.responseText;
						var jsonStr = xhr.responseText;
						var jsonObj = JSON.parse(jsonStr);
						div.innerHTML = jsonObj.result.name;
					}
				}
			}

			document.querySelector("button").addEventListener("click", function() {
				test();
			});

			document.querySelector("#register").addEventListener("click", function() {
				var xhr = new XMLHttpRequest();
				xhr.open("POST", "https://api.apiopen.top/developerRegister");
				xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
				xhr.send("name=22test123321666&passwd=123&email=22test@163.com");
				xhr.onreadystatechange = function() {
					if (xhr.readyState == 4 && xhr.status == 200) {
						var jsonStr = xhr.responseText;
						var div = document.querySelector("div");
						var jsonObj = JSON.parse(jsonStr);
						div.innerHTML = jsonObj.result.apiKey;
					}
				}
			});
		</script>
	</body>
</html>
